<template>
	<view class="information-index">
		<rf-navbar title="个人资料" src="../../static/images/observe/add-observe-bg_top.png" @click="onBack"></rf-navbar>

		<view class="top">
			<view class="information-top">
				<image class="bg-bottom" :style="{top:navBarHeight}"
					src="../../static/images/observe/add-observe-bg_bottom.png"></image>
			</view>

			<view class="information-logo">
				<rf-uploadfile v-model="form.avatar"></rf-uploadfile>
				<view class="text">超级小助教号：{{form.id}}</view>
			</view>
		</view>
		<view class="form">
			<u--form :model="form" ref="uForm" labelPosition="top" labelWidth="300rpx" :rules="rules">
				<u-form-item label="昵称" prop="name" required>
					<view class="cell">
						<view class="icon">
							<image class="icon_img icon-smile"></image>
						</view>
						<u-input v-model="form.name" placeholder="请输入您的昵称"
							prefixIconStyle="font-size: 22px;color: #909399" />
					</view>
				</u-form-item>
				<u-form-item label="性别" prop="sex">
					<view class="sex">
						<view class="man" :class="{highlight:sexIcon == 0}" @click="onclicksex(0)">
							男
							<view class="man-icon" v-if="sexIcon == 0">
								<u-icon name="checkbox-mark" bold color="#fff" size="20"></u-icon>
							</view>
						</view>
						<view class="man" style="margin-left: 20px;" :class="{highlight:sexIcon == 1}"
							@click="onclicksex(1)">
							女
							<view class="man-icon" v-if="sexIcon == 1">
								<u-icon name="checkbox-mark" bold color="#fff" size="20"></u-icon>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="年龄" prop="age" @click="showAge = true;">
					<view class="cell">
						<view class="icon">
							<image class="icon_img icon-clover"></image>
						</view>
						<!-- <u--input v-model="form.age" disabled disabledColor="#ffffff" placeholder="请选择您的年龄"
							border="none"></u--input> -->
						<u-input v-model="form.age" disabled placeholder="请输入您的年龄"
							prefixIconStyle="font-size: 22px;color: #909399" />
						<view class="arrow">
							<u-icon slot="right" name="arrow-right"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="学历" prop="education" @click="showEducation = true;">
					<view class="cell">
						<view class="icon">
							<image class="icon_img icon-cap"></image>
						</view>
						<u-action-sheet></u-action-sheet>
						<u--input v-model="education" disabled disabledColor="#ffffff" placeholder="请选择您的学历"
							border="none"></u--input>
						<view class="arrow">
							<u-icon slot="right" name="arrow-right"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="联系方式" prop="phoneNumber" required>
					<view class="cell">
						<view class="icon">
							<image class="icon_img icon-04png"></image>
						</view>
						<u-input v-model="form.phoneNumber" placeholder="请输入您的联系方式"
							prefixIconStyle="font-size: 22px;color: #909399" />
					</view>
				</u-form-item>
				<u-form-item label="所在幼儿园" prop="kindergartenName">
					<view class="cell">
						<view class="icon">
							<image class="icon_img icon-05png"></image>
						</view>
						<u-input v-model="form.kindergartenName" placeholder="请输入您的所在幼儿园"
							prefixIconStyle="font-size: 22px;color: #909399" />
					</view>
				</u-form-item>
				<u-form-item label="在园岗位" prop="position" @click="showPost = true;">
					<view class="cell">
						<view class="icon">
							<image class="icon_img icon-cap"></image>
						</view>
						<u--input v-model="position" disabled disabledColor="#ffffff" placeholder="请选择您的在园岗位"
							border="none"></u--input>
						<view class="arrow">
							<u-icon slot="right" name="arrow-right"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="职称" prop="title" @click="showTitle = true;">
					<view class="cell">
						<view class="icon">
							<image class="icon_img icon-06png"></image>
						</view>
						<u--input v-model="title" disabled disabledColor="#ffffff" placeholder="请选择您的职称"
							border="none"></u--input>
						<view class="arrow">
							<u-icon slot="right" name="arrow-right"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="爱好" prop="hobby">
					<view class="cell">
						<view class="icon">
							<image class="icon_img icon-heart"></image>
						</view>
						<u-input v-model="form.hobby" placeholder="请输入您的爱好"
							prefixIconStyle="font-size: 22px;color: #909399" />
					</view>
				</u-form-item>
			</u--form>
			<view class="form-foot">
				<view class="icon">
					<image class="icon-warn-orange" mode=""></image>
				</view>
				<view class="text">超级助教重视您的个人信息，以上信息将仅用在更好的向您推荐合适您的教育方式和建议</view>
			</view>
			<view class="btn" @click="submit">保存</view>
		</view>

		<!-- 性别 -->
		<!-- <u-action-sheet :show="showSex" :actions="SexList" title="请选择您的性别" @close="showSex = false"
			@select="sexSelect"></u-action-sheet> -->
		<view class="popup">
			<!-- 选择年龄 -->
			<u-picker :show="showAge" :isCheckShow="true" title="选择年龄" @cancel="showAge = false" @confirm="confirm"
				:columns="columns" cancelColor="#3A3D4B" confirmColor="#58C866"></u-picker>
			<!-- 学历 -->
			<u-picker :show="showEducation" @cancel="showEducation = false" @confirm="educationSelect"
				:columns="educationList" keyName="name" :isCheckShow="true" title="请选择学历" cancelColor="#3A3D4B"
				confirmColor="#58C866"></u-picker>
			<!-- 在园岗位 -->
			<u-picker :show="showPost" :isCheckShow="true" @cancel="showPost = false" @confirm="postSelect"
				:columns="PostList" keyName="name" title="在园岗位" cancelColor="#3A3D4B" confirmColor="#58C866"></u-picker>
			<!-- 职称 -->
			<!-- <u-action-sheet :show="showTitle" :actions="TitleList" title="请选择您的职称" @close="showTitle = false"
				@select="titleSelect" cancelColor="#3A3D4B" confirmColor="#58C866"></u-action-sheet> -->
			<u-picker :show="showTitle" :isCheckShow="true" @cancel="showTitle = false" @confirm="titleSelect"
				:columns="TitleList" keyName="name" title="请选择职称" cancelColor="#3A3D4B"
				confirmColor="#58C866"></u-picker>
		</view>
		<rf-toast :show="showWarn" :isSus="false" :title="warning" @click="showWarn = false"></rf-toast>
		<rf-toast :show="showSus" :isSus="true" title="保存成功" @click="showSus = false"></rf-toast>

		<!-- 是否将观察，保存为草稿 -->
		<rf-alert :show="draftShow" @close="draftConfirm" @confirm="draftConfirm" title="温馨提示" desc="是否保存为草稿？"
			confirmText="是" cancelText="否"></rf-alert>
		<view class="" v-if="showPage && storage">
			<page-container :show="showPage" :overlay="false" @beforeleave="beforeleave('showPage')"></page-container>
		</view>
	</view>
</template>

<script>
	import {
		getTeacherInfo,
		upTeacherInfo,
		getTeacherPosition,
	} from '@/api/user.js'
	export default {
		data() {
			return {
				statusBarHeight: this.statusBarHeight,
				navBarHeight: this.navBarHeight,
				menuHeight: this.menuHeight,
				menuRight: this.menuRight,
				menuTop: this.menuTop,
				menuBotton: this.menuBotton,



				education: "",
				position: "",
				title: "",
				tempform: {}, // 用于比较是否保存为草稿
				form: {

					id: "",
					avatar: "", // 头像
					name: "", // 名称昵称
					age: 18, // 年龄
					sex: 0, // 性别
					education: "", // 学历
					phoneNumber: "", // 电话号码
					kindergartenName: "", // 幼儿园名称
					title: "", // 头衔，职称
					hobby: "", // 兴趣爱好
					position: "", // 岗位
					// growthValue: "",
					// memberId: "",
					// memberType: "",
					// memberExpirationDate: "",
				},
				sexIcon: 0,
				showEducation: false,
				showAge: false,
				showSex: false,
				showPost: false,
				showTitle: false,
				columns: [],
				educationList: [
					[{
							id: 0,
							name: '其他',
						}, {
							id: 1,
							name: '中专',
						},
						{
							id: 2,
							name: '大专',
						},
						{
							id: 3,
							name: '本科',
						},
						{
							id: 4,
							name: '硕士',
						},
						{
							id: 5,
							name: '博士',
						}
					]
				],

				PostList: [],
				TitleList: [
					[{
						name: '无',
						id: 0,
					}, {
						name: '初级',
						id: 1,
					}, {
						name: '中级',
						id: 2,
					}, {
						name: '副高',
						id: 3,
					}, {
						name: '正高',
						id: 4,
					}]
				],
				rules: {
					name: [{
							validator: (rule, value, callback) => {
								if (value) {
									return RegExp(
										/^[\u4e00-\u9fa5]{1,6}$/
									).test(value)
								} else {
									return true
								}
							},
							message: "姓名不能为英文、数字及特殊字符",
							trigger: "blur",
						},
						{
							required: true,
							message: "姓名不能为空",
							trigger: ['blur', 'change']
						}
					],
					phoneNumber: [{
							validator: (rule, value, callback) => {
								if (value) {
									return this.$u.test.mobile(value);
								} else {
									return true
								}
							},
							message: "手机号格式不正确",
							trigger: "blur"
						},
						{
							required: false,
							message: "手机号码不能为空",
							trigger: ['blur', 'change']
						}
					],
					hobby: [{
						required: false,
						message: "不能为空",
						trigger: "blur"
					}],
				},
				showWarn: false,
				showSus: false,
				warning: "",

				showPage: true, //一开始设置为显示
				draftShow: false, // 是否保存为草稿
				cache: true, // 是否存为草稿，在发布后，设置为false
			};
		},

		computed: {
			storage() {
				// 将字典转换为字符串并比较
				const strDict1 = JSON.stringify(this.form);
				const strDict2 = JSON.stringify(this.tempform);
				return !(strDict1 === strDict2)
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			let columns = ["18", "19"];
			for (let i = 20; i <= 55; i++) {
				columns.push(i.toString());
			}
			this.columns.push(columns)
			this.getTeacherPos()
		},
		methods: {
			beforeleave() {
				this.showPage = false //这个很重要，一定要先把弹框删除掉

				if (this.storage && this.cache) {
					this.draftShow = true;
				} else {
					uni.navigateBack()
				}

			},
			onBack() {
				uni.navigateBack()
			},
			draftConfirm(e) {
				// 是否保存为草稿
				if (e) {
					// 保存草稿
					// 异步新增本地缓存。
					uni.setStorage({
						key: 'Information_draft',
						data: JSON.stringify(this.form)
					})
				} else {
					// 不保存草稿
					// 清除本地缓存
					uni.removeStorage({
						key: "Information_draft"
					})
				}

				this.draftShow = false
				// 手动执行返回
				uni.navigateBack({
					delta: 1
				})
			},
			async getTeacherPos() {
				let _that = this
				var res = await getTeacherPosition()
				console.log("res: " + JSON.stringify(res));




				if (res.code === 200) {
					_that.PostList.push(res.data)

					// 获取草稿信息
					var draft = uni.getStorageSync("Information_draft")
					if (draft) {
						this.form = this.formatData(JSON.parse(draft))
					} else {
						// 没有草稿就加载网络数据
						_that.getInfo()
					}
				}
				// getTeacherPosition().then(res => {
				// 	console.log(res);
				// 	console.log("res: " + JSON.stringify(res.data[0].name));
				// 	_that.PostList.push(res.data)
				// 	_that.getInfo()
				// })
			},
			Back() {
				uni.navigateBack(1);
			},
			formatData(data) {
				if (data.sex == null) {
					data.sex = 0
				}
				this.sexIcon = data.sex // 默认性别选中
				this.educationList[0].forEach((item) => {
					if (data.education == item.id) {
						this.education = item.name;
					}
				});
				this.TitleList[0].forEach((item) => {
					if (data.title == item.id) {
						this.title = item.name;
					}
				});
				this.PostList[0].forEach((item) => {
					if (data.position == item.id) {
						this.position = item.name;
					}
				});
				return {
					id: data.id,
					avatar: data.avatar, // 头像
					name: data.name, // 名称昵称
					age: data.age, // 年龄
					sex: data.sex, // 性别
					education: data.education, // 学历
					phoneNumber: data.phoneNumber, // 电话号码
					kindergartenName: data.kindergartenName, // 幼儿园名称
					title: data.title, // 头衔，职称
					hobby: data.hobby, // 兴趣爱好
					position: data.position, // 岗位
					// growthValue: data.growthValue,
					// memberId: data.memberId,
					// memberType: data.memberType,
					// memberExpirationDate: data.memberExpirationDate,
				};
			},
			getInfo() {
				let _that = this
				getTeacherInfo().then(res => {
					console.log("res: " + JSON.stringify(res));
					_that.form = _that.formatData(res.data)
					_that.tempform = _that.formatData(res.data)
				})
			},
			// 选择学历
			educationSelect(e) {
				console.log("e: " + JSON.stringify(e));
				this.showEducation = false;
				this.form.education = e.value[0].id;
				this.education = e.value[0].name;

				// this.$refs.uForm.validateField('userInfo.sex');
			},
			onclicksex(e) {
				console.log(e);
				this.sexIcon = e;
				this.form.sex = e;
			},
			ageSelect(e) {
				this.form.age = e.name;
			},
			postSelect(e) {
				this.showPost = false
				this.form.position = e.value[0].id;
				this.position = e.value[0].name;
			},
			titleSelect(e) {

				this.showTitle = false;
				this.form.title = e.value[0].id;
				this.title = e.value[0].name;
			},
			confirm(e) {

				this.form.age = e.value[0]
				this.showAge = false;
			},
			submit() {
				uni.removeStorage({
					key: "Information_draft"
				})
				console.log("this.form.: " + JSON.stringify(this.form));

				this.$refs.uForm.validate()
					.then((res) => {
						console.log("res: " + JSON.stringify(res));
						// uni.$u.toast('校验通过');
						upTeacherInfo(this.form).then(res => {
							if (res.code == 200) {
								this.cache = false;
								this.showSus = true;
								setTimeout(() => {
									this.showSus = false;
									uni.navigateBack()
									uni.$emit("refreshMemberInfo", null);
								}, 1500)
							}
						})
					}).catch((errors) => {
						// console.log(errors);
						this.warning = errors[0].message
						this.showWarn = true
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		position: relative !important;
		top: 0px !important;
		background-color: #fff;
	}

	::v-deep.u-input {
		padding: 0 !important;
	}

	::v-deep.u-input__content {
		background-color: #f4f7f9;
		padding: 20rpx 20rpx 20rpx 70rpx;
		border-radius: 10rpx;
	}

	::v-deep.uni-input-input:disabled {
		background-color: #f4f7f9;
	}

	::v-deep.u-form-item__body__right__content {
		background-color: #f4f7f9;
	}

	::v-deep.u-input {
		background-color: #f4f7f9;
	}

	::v-deep.u-border {
		border-color: #f4f7f9 !important;
	}

	::v-deep.u-form-item__body__left__content__label {
		margin: 0 0 14rpx 0;
		font-weight: 500;
		color: #000000;
		font-size: 32rpx;
	}

	.information-index {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding-bottom: 80rpx;

		.top {
			height: 450rpx;
			// background: linear-gradient(179deg, #c6f6c3 0%, #ffffff 100%);

			.information-top {
				padding: 0 30rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.bg-bottom {
					position: fixed;
					left: 0;
					top: 0;
					// z-index: 1;
					width: 100%;

					height: 300px;
				}
			}

			.information-logo {
				position: relative;
				z-index: 990;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.text {
					width: 352rpx;
					height: 48rpx;
					margin-top: 20rpx;
					background-color: #d8f3db;
					border-radius: 24rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: 24rpx;
					color: #27ab55;
				}
			}
		}

		.form {
			padding: 0 40rpx;
			position: relative;
			background-color: #fff;

			.sex {
				display: flex;
				background-color: #fff;

				.man {
					width: 168rpx;
					height: 88rpx;
					background: #f4f7f9;
					border-radius: 20rpx;
					text-align: center;
					line-height: 88rpx;
					position: relative;
					margin-left: 16rpx;

					&.highlight {
						border: 4rpx solid #58c866;
						background: #ffffff;
					}

					.man-icon {
						background-color: #58c866;
						position: absolute;
						top: -16rpx;
						right: -16rpx;
						border-radius: 50%;
					}
				}
			}

			.cell {
				display: flex;
				align-items: center;

				.icon {
					position: absolute;

					.icon_img {
						position: relative;
						width: 20px;
						height: 20px;
						left: 20rpx;
					}
				}

				.arrow {
					position: absolute;
					right: 20px;
					margin-right: 20rpx;
				}
			}
		}

		.form-foot {
			display: flex;
			padding: 0 40rpx;
			margin: 30rpx 0 60rpx 0;

			.icon {
				width: 55rpx;
				height: 37rpx;
				margin-right: 15rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				font-size: 24rpx;

				color: #7b838f;
				line-height: 34rpx;
			}
		}

		.btn {
			margin: 0 auto 50rpx;
			width: 94%;
			height: 88rpx;
			background: #58c866;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
		}

		.popup {
			.u-popup__content.data-v-3a231fda {
				position: relative;
				border-radius: 24rpx 24rpx 0 0;
				overflow: hidden;
				padding-bottom: 150rpx;
			}

			.u-picker__view.data-v-f45a262e {
				height: 360rpx !important;
			}


			.u-toolbar__wrapper__cancel.data-v-55c89db1 {
				padding: 0;
				position: absolute;
				left: 100rpx;
				bottom: -78rpx;

				width: 200rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.u-toolbar__wrapper__confirm.data-v-55c89db1 {
				padding: 0;
				position: absolute;
				right: 100rpx;
				bottom: -78rpx;

				width: 200rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>